<template>
  <div>
    <Row>
      <Col span="24">
        <Card class="margin-bottom-10">
          <Form inline>
            <FormItem class="margin-bottom-0">
              <Input v-model="code" placeholder="单位编码"></Input>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Input v-model="keywords" placeholder="单位名称"></Input>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Select @change="query" v-model="depart" placeholder="科室名称">
                  <Option value="">全部</Option>
                  <Option value="1">行政政法科</Option>
                  <Option value="2">教科文科</Option>
                  <Option value="3">农业农村科</Option>
                  <!-- <Option value="3008">行政政法科</Option>
                  <Option value="3009">教科文科</Option>
                  <Option value="3010">社保科</Option>
                  <Option value="3011">农业科</Option>
                  <Option value="3012">经建科</Option> -->
                  <Option value="4">社保科</Option>
                  <Option value="5">经建科</Option>
                  <Option value="6">乡镇财政管理局</Option>
              </Select>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Select @change="query" v-model="status" placeholder="审核状态">
                  <Option value="">全部</Option>
                  <Option value="1">未上报</Option>
                  <Option value="2">已上报</Option>
                  <Option value="3">审核通过</Option>
              </Select>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Button @click="query" type="primary">查询</Button>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Button @click="audit" type="success">审核文档</Button>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Button @click="cancel" type="error">取消上报</Button>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Button @click="download" type="primary">批量下载文档</Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <Card>
          <div>
            <Table
              :loading="listLoading"
              :columns="columnsList"
              :data="data"
              border
              disabled-hover
              @on-selection-change="onselect"
            >
            <template slot-scope="{ row }" slot="process">
                <Progress v-if="row.status === 1" :percent="0" />
                <Progress v-if="row.status === 2" :percent="50" />
                <Progress v-if="row.status === 3" :percent="100" />
            </template>
            <template slot-scope="{ row }" slot="status">
                <Tag v-if="row.status === 1" color="default">未上报</Tag>
                <Tag v-if="row.status === 2" color="warning">已上报</Tag>
                <Tag v-if="row.status === 3" color="success">审核通过</Tag>
            </template>
            <template slot-scope="{ row,index }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="show(row,index)">查看填报</Button>
            </template>
            </Table>
          </div>
          <div class="pages">
            <Page :page-size-opts="[100, 200, 500, 1000]" :total="total" :current="curr" @on-change="changePage" @on-page-size-change="sizeChange" show-sizer></Page>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import { getReport, auditAction, cancelAction, batchDownload } from '@/api/budget'
import { mapMutations } from 'vuex'
export default {
  name: 'report',
  data () {
    return {
      code: '',
      depart: '',
      total: 0,
      status: '',
      curr: 1,
      pageSize: 10,
      keywords: '',
      listLoading: false,
      columnsList: [
        { type: 'selection', width: 60, align: 'center' },
        { type: 'index', width: 60, align: 'center' },
        { title: '单位编码', key: 'uniq_code', width: 150 },
        { title: '单位名称', key: 'institutions_name', width: 250 },
        { title: '填报进度', slot: 'process', minWidth: 150 },
        { title: '审核状态', slot: 'status', width: 120 },
        { title: '操作', slot: 'action', width: 130, align: 'center' }
      ],
      data: [],
      selections: []
    }
  },
  mounted () {
    // console.log(11111, this.$router)
    this.query()
  },
  watch: {
    '$route' (newRoute) {
      console.log(7777, newRoute)
      const { name, query, params, meta } = newRoute
      this.addTag({
        route: { name, query, params, meta },
        type: 'push'
      })
      this.setBreadCrumb(newRoute)
      this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
      // this.$refs.sideMenu.updateOpenName(newRoute.name)
    }
  },
  methods: {
    ...mapMutations([
      'setBreadCrumb',
      'setTagNavList',
      'addTag'
    ]),
    query () {
      this.listLoading = true
      getReport({ code: this.code, depart: this.depart, keywords: this.keywords, status: this.status, start: this.curr, limit: this.pageSize }).then(response => {
        this.data = response.data.data.list
        this.total = response.data.data.count
        this.listLoading = false
      })
    },
    sizeChange (val) {
      this.pageSize = val
      this.query()
    },
    changePage (val) {
      // console.log(this.curr, val)
      this.curr = val
      this.query()
    },
    show (row) {
      console.log(9999, row.institutions_code)
      this.$router.push({
        // name: 'reportDetail',
        path: 'reportDetail',
        query: { code: row.uniq_code }
      })
    },
    audit () {
      if (this.selections.length === 0) {
        this.$Message['error']({
          background: true,
          content: `请选择文档`
        })
        return false
      }
      this.listLoading = true
      let self = this
      auditAction({ ids: this.selections }).then(function (res) {
        self.query()
      })
    },
    cancel () {
      if (this.selections.length === 0) {
        this.$Message['error']({
          background: true,
          content: `请选择文档`
        })
        return false
      }
      this.listLoading = true
      let self = this
      cancelAction({ ids: this.selections }).then(function (res) {
        self.query()
      })
    },
    onselect (sels) {
      let selections = []
      sels.map(item => {
        selections.push(item.uniq_code)
      })
      this.selections = selections
      // console.log(11111, this.selections)
    },
    download () {
      batchDownload({ codes: this.selections }).then(res => {
        console.log(4444, res)
        let content = res.data
        // 组装a标签
        let date = new Date()
        console.log(date.getFullYear())
        let elink = document.createElement('a')
        // 设置下载文件名
        elink.download = 'report.zip'
        elink.style.display = 'none'
        let blob = new Blob([content], { type: '' })
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        document.body.removeChild(elink)
      })
    }
  }
}
</script>
<style scoped>
.pages {
  width: 100%;
  height: 40px;
  margin-top: 20px;
}
</style>
